import { FC } from 'react'

type ProportionDataBoxProps = {
  value: number
  label: string
  color: string
}
const LengedDataBox: FC<ProportionDataBoxProps> = ({ value, label, color }) => {
  return (
    <div style={{ display: 'flex' }}>
      <div
        className="dr_label"
        style={{
          fontSize: 14,
          fontFamily: 'ZQKHY',
          width: 45,
          minWidth: 45,
          padding: '2px 0',
          lineHeight: '16px',
          boxSizing: 'border-box',
          textAlign: 'left',
          color: color
        }}
      >
        {/* <CountUp start={0} end={value} duration={2} decimals={2} /> */}
        <span>{value}</span>
        <span style={{ fontFamily: 'DIN-Bold', fontSize: 10, color: color }}>
          %
        </span>
      </div>
      <div
        title={label}
        className="dr_label"
        style={{
          padding: '2px 0',
          fontSize: 12,
          marginLeft: 10,
          lineHeight: '16px',
          maxWidth: 125
        }}
      >
        {label}
      </div>
    </div>
  )
}
export default LengedDataBox
